<template>
  <!-- 修改密码页面 -->
  <div>
    <el-card class="box-card" style="height:800px;">
      <div id="title">
        <span class="block"></span>
        <span class="title-text">修改密码</span>
      </div>
      <div class="updatePasswordBox">
        <el-col :span="6" class="el-col">
         <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="旧密码" prop="oldPassword">
                <el-input type="password" v-model="ruleForm.oldPassword" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="confirmkPassword">
                <el-input type="password" v-model="ruleForm.confirmkPassword" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="userBackUpdatePassword('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
        </el-col>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 表单规则登录名，密码不为空，不超过二十位
      rules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
          { min: 0, max: 20, message: '旧密码不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 0, max: 20, message: '密码不能为空', trigger: 'blur' }
        ],
        confirmkPassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { min: 0, max: 20, message: '确认密码不能为空', trigger: 'blur' }
        ]
      },
      // 旧密码 密码 确认密码
      ruleForm: {
        oldPassword: '',
        password: '',
        confirmkPassword: '',
        id: window.sessionStorage.getItem('id')
      }
    }
  },
  mounted () {
  },
  methods: {
    userBackUpdatePassword () {
      debugger
      console.log(this.ruleForm.oldPassword)
      if (this.ruleForm.oldPassword !== '' && this.ruleForm.password !== '' && this.ruleForm.confirmkPassword !== '') {
        this.$axios.post('/userBack/userBackUpdatePassword', this.ruleForm).then(res => {
          if (res.data.flag) {
            this.myMessage('success', res.data.obj)
            this.$router.push('/')// 修改密码成功跳转到登录页面
            window.sessionStorage.setItem('token', '')
          } else {
            this.myMessage('error', res.data.obj)
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.myMessage('error', '内容不能为空')
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 弹窗提示
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>

<style lang="less" scoped>
  #title{
    width:100%;
    height:80px;
    border-bottom: 1px solid #eaeaea;
    line-height:80px;
    text-align: left;
  }
  .el-card__body{
    padding:0;
  }
  .block{
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    height:60px;
    background: #1b91ff;
  }
  .title-text{
    vertical-align: middle;
    display: inline-block;
    font-size:18px;
    font-weight:700;
    margin-left: 40px;
  }
  .updatePasswordBox{
    width: 100%;
    height: 400px;
    // background: aquamarine;
   }
    .el-col{
     margin-left: 30px;
     margin-top: 30px;
    //  background: #1b91ff;
     height: 300px;
   }
//   #personInfo{
//     width:100%;
//     height:720px;
//     padding: 40px 50px;
//     box-sizing: border-box;
//   }
//   .el-textarea__inner{
//     height:190px;
//   }
//   .el-form-item{
//     margin-bottom:35px;
//   }
//   #personCard{
//     width:100%px;
//     height:480px;
//     padding-top: 40px;
//     box-sizing: border-box;
//   }
//   #head-portrait{
//     width:150px;
//     height:150px;
//     border-radius: 50%;
//     margin:0 auto;
//     overflow: hidden;
//     margin-bottom: 25px;
//   }
//   .message{
//     line-height: 45px;
//     color:#FFFFFF;
//     text-align: center;
//   }
</style>
